<template>
  <div class="home">
    <el-container class="container-main">
      <el-aside width="250px" class="main-right">
        <el-header class="header-title">常用组件</el-header>
        <draggable
          :list="CommonUserComponents"
          :move="() => true"
          class="draggable-container"
          v-bind="{
            group: {
              name: 'people', // 同分组可以互相拖拽
              pull: 'clone', // 拖拽变为复制
              put: false, // 是否允许拖入当前组
            },
            sort: false,
            ghostClass: 'ghostClass',
          }"
        >
          <el-tag
            v-for="(item, index) in CommonUserComponents"
            :key="index"
            effect="dark"
          >
            <i :class="item.icon"></i>
            {{item.name}}
          </el-tag>
        </draggable>
      </el-aside>
      <el-container>
        <!--   菜单栏       -->
        <el-header class="main-bottom header-padding">
          <el-tag
            effect="plain"
            type="danger"
            class="header-tags"
            @click="clearWidgetConfig"
          >
            <i class="el-icon-delete"></i><span>清空</span>
          </el-tag>
          <el-tag
            type=""
            effect="plain"
            class="header-tags"
            @click="saveWidgetConfig"
          ><i class="el-icon-document"></i><span>生成JSON</span>
          </el-tag>
          <el-tag
            effect="plain"
            type=""
            class="header-tags"
            @click="setFormJson"
          ><i class="el-icon-connection"></i><span>导入JSON</span>
          </el-tag>
          <!-- 表单预览 -->
          <el-tag effect="plain" type="" class="header-tags" @click="$router.push({name: 'Demo'})">
            <i class="el-icon-help"></i><span>查看demo</span>
          </el-tag>
        </el-header>
        <el-main class="box-padding">
          <!--   渲染区     -->
          <div class="widget-form-container">
            <WidgetForm
              ref="configFormData"
              :select.sync="widgetFormSelect"
              :config-form-data="configFormData"
            />
          </div>
        </el-main>
      </el-container>
      <el-aside width="250px" class="main-left">
        <el-tabs v-model="activeName">
          <el-tab-pane label="组件设置" name="first">
            <WidgetConfig :eleItem.sync="widgetFormSelect" />
          </el-tab-pane>
          <el-tab-pane label="表单属性" name="second">
            <FormConfig :formdata="configFormData.config" />
          </el-tab-pane>
        </el-tabs>

      </el-aside>
    </el-container>
    <!-- 生成json框 -->
    <el-dialog :title="dialogTitle" :visible.sync="jsonDialog" top="5vh">
      <div v-if="!jsonTextareaReadonly">
        JSON格式如下，直接复制生成的json覆盖此处代码点击确定即可
      </div>
      <div style="max-height: 400px; overflow-y: scroll">
        <el-input
          type="textarea"
          autosize
          :readonly="jsonTextareaReadonly"
          v-model="jsonmsg"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer" v-if="!jsonTextareaReadonly">
        <el-button @click="jsonDialog = false">取 消</el-button>
        <el-button type="primary" @click="setJsonBtn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 预览弹出框 -->
    <el-dialog
        title="表单预览"
        :visible.sync="dialogVisible"
        width="70%"
        top="5vh"
    >
<!--      <dialogform ref="dialogForm"></dialogform>-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
<!--        <el-button type="primary" @click="getDialogForm">获取数据</el-button>-->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import WidgetForm from "@/components/WidgetForm"
import WidgetConfig from "@/components/WidgetConfig"
import FormConfig from "@/components/FormConfig"
import { CommonUserComponents } from '@/configData/componentConfig.js'
export default {
  name: 'Home',
  components: {
    draggable,
    WidgetForm,
    WidgetConfig,
    FormConfig
  },
  data() {
    return {
      CommonUserComponents,
      // 渲染区表单config
      configFormData: {
        // 拖拽区接收到的组件
        list: [],
        // 拖拽区el-form属性
        config: {
          labelWidth: 100,
          labelPosition: "right",
          size: "small"
        }
      },
      // 选中的元素
      widgetFormSelect: {
        key: null,
        options: {
          placeholder: ""
        }
      },
      activeName: "first",
      dialogTitle: "",
      // 生成json弹框
      jsonDialog: false,
      // 弹出文本域是否可编辑,默认不可编辑
      jsonTextareaReadonly: true,
      // 生成的json语句
      jsonmsg: "",
      dialogVisible: false, // demo dialog

    }
  },
  methods: {
    clearWidgetConfig() {
      // 重置formConfig
      this.configFormData = {
        list: [],
        config: {
          labelWidth: 100,
          labelPosition: "right",
          size: "small",
        },
      };
      // 重置选中的组件
      this.widgetFormSelect = {
        key: null,
        options: {
          placeholder: null,
        },
      };
    },
    // 保存json
    saveWidgetConfig() {
      this.dialogTitle = '生成json'
      this.jsonTextareaReadonly = true;
      this.jsonDialog = true
      this.jsonmsg = JSON.stringify(this.configFormData, null, 1)
    },
    setFormJson() {
      this.dialogTitle = "导入JSON";
      this.jsonTextareaReadonly = false;
      this.jsonDialog = true;
      this.jsonmsg = JSON.stringify(
        {
          list: [],
          config: {
            labelWidth: 100,
            labelPosition: "right",
            size: "small",
          },
        },
        null,
        1
      )
    },
    // 确定导入json
    setJsonBtn() {
      try {
        this.initJson(this.jsonmsg)
        this.jsonDialog = false
      } catch(err) {
        this.$message('导入的JSON格式有误')
      }
    },
    initJson(strJson) {
      // 写入 data json
      this.configFormData = JSON.parse(strJson)
      // 写入选中的组件json
      this.widgetFormSelect = this.configFormData.list[0]
    },
    showDialog() {

    }
  }
}
</script>
<style lang="scss" scoped>
.container-main {
  height: 100vh;
}
.header-title {
  width: 100%;
  height: 35px !important;
  line-height: 25px !important;
  padding: 0px !important;
  border-bottom: 1px solid #999999;
}
.main-right {
  border-right: 1px solid #999;
  padding: 10px;
}
.main-left {
  border-left: 1px solid #999;
  padding: 10px;
}
.box-padding {
  padding: 0px !important;
  position: relative;
  overflow-y: auto;
}
.widget-form-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.draggable-container {
  cursor: move;
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 25px;
  gap: 17px;
}
.main-bottom {
  border-bottom: 1px solid #999;
  height: 45px !important;
  line-height: 45px;
}
.header-padding {
  position: relative;
  padding: 0px !important;
  text-align: right;
}
.header-tags {
  margin-right: 10px;
  cursor: pointer;
}
.header-tags:nth-child(1) {
  position: absolute;
  left: 10px;
  top: 12px;
}
</style>
